import React, {memo} from 'react'
import {useListHook} from '@/hooks'
import {Button, Modal, Toast} from 'antd-mobile'
import {MyNavBar} from '@/components'
import {Http} from '@/utils'
import {history} from 'umi'
import Lists from './componemts/Lists'
import {_getList} from './store'

const alert = Modal.alert

function PersonManage(props) {
  let reset = null
  const resetFunc = (resetTemp) => {
    reset = resetTemp
  }

  const {data, loading, showLoading} = useListHook({func: _getList, resetFunc})

  const handleDelete = (id) => {
    alert('删除', '你确定要删除联系人吗？', [
      {text: '取消'},
      {
        text: '确认', onPress: async () => {
          const result = await Http({url: '/person/' + id, method: 'delete'})
          if (result) {
            Toast.success('删除成功')
            reset()
          }
        }
      }
    ])
  }

  return (
    <div>
      <MyNavBar title={'联系人设置'}/>
      <Button type='primary' onClick={() => {
        history.push('/user/personEdit')
      }}>新增联系人</Button>
      <Lists persons={data} loading={loading} handleDelete={handleDelete} showLoading={showLoading}/>
    </div>
  )
}

export default memo(PersonManage)
